<template>
  <div>
    <h1>水果列表</h1>
    <ul v-if="!loading">
      <li v-for="(item,i) of fruits" :key="i">
        {{item}}
      </li>
    </ul>
    <p v-if="loading">loading...</p>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        fruits:[],
        loading:true
      }
    },
    created(){
      this.getData()
    },
    methods:{
      getData(){
        setTimeout(()=>{
          this.fruits=["香蕉","苹果","鸭梨"],
          this.loading = false
        },2000)
      }
      }
  }
</script>

<style>

</style>
